<template>
  <div class="main"  v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0,1)">
    <div class="top">
      <h3 style="color: green;" v-if="memberScore>qualifyScore">合格</h3>
      <h3 style="color: red;" v-else>不合格</h3>
      <!-- <p>2023-02-03 09:54:47</p> -->
      <div class="topInfo">
        <p>考试姓名：{{nickName}}</p>
        <p>考试用时：{{memberTime }} 分钟</p>
        <p>考试得分：{{memberScore}}分</p>
      </div>
    </div>
    <el-card>
      <div
        v-for="(item, index) in titleList"
        :key="item.index"
        class="titleCard"
      >
        <p>
          ({{ index + 1 }}){{ item.content
          }}<span>(得分：{{ item.score }})</span>
        </p>
        <div v-for="(it, index) in item.answerList" :key="index + 'a'" class="option A">
          <p>{{ it.abc }}：{{ it.content }}</p>
        </div>

        <div class="answer">
          <p>正确答案：{{ payFilter(item.answerList) }}</p>
          <span v-if="item.isRight == false && item.actualScore == 2"
            >答题结果：未答</span
          >
          <span style="color: green;" v-if="item.isRight && item.actualScore > 1">答题结果：答对</span
          ><span style="color: red;" v-if="item.isRight == false && item.actualScore == 0"
            >答题结果：答错</span
          >
        </div>
        <el-divider></el-divider>
      </div>
    </el-card>
  </div>
</template>

<script>
import { exampaperResult } from "@/api/table";
import cache from '@/plugins/cache';
// import { forEach } from 'mock/user';

export default {
  data() {
    return {
      titleList: [],
      memberScore:null,
      nickName:null,
      memberTime:null,
      qualifyScore:null,
      loading:true
    };
  },
  created() {
    this.getexampaperResult();
   this.nickName = cache.session.getJSON('nickName')
     
  },
  computed: {
    payFilter() {
      return function (val) {
        
        
        // val.filter(item => {
        //    if (item.isRight == true) {
        //     console.log(item.abc);
        //     return item.abc;
        //   }
        
        // });
       
         
        for (let i = 0; i < val.length; i++) {
         
          if (val[i].isRight) {
            return val[i].abc
          }
        }
       
      };
    }, 
  },

  methods: {
    getexampaperResult() {
      exampaperResult({ id: this.$route.params.id, memberId: cache.session.getJSON('userId') }).then(
        (res) => {
          this.memberScore = res.data.memberScore
          this.memberTime = res.data.memberTime
          this.qualifyScore = res.data.qualifyScore
          this.titleList = res.data.quList;
          this.loading = false
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  
  padding: 20px;
  text-align: center;
  .topInfo {
    display: flex;
    justify-content: space-around;
  }
  .titleCard {
    text-align: left;
    .answer {
      display: flex;
      justify-content: space-between;
      p {
        color: #24da70;
      }
    }
  }
}
</style>
